<template>
  <div class="wage-set-group">
    <div class="top-wrapper">
      <div style="margin-bottom: 12px">
        <a-alert
          message="请先前往【工资表模板】创建用工单位的工资表模板，然后新增薪资组并选择计税规则"
          banner
          closable
          style="width: 620px"
        />
        <div>
          <div class="wage-top-title">使用指南</div>
          <div class="wage-top-explain">
            <div>1、薪资组管理，即把人员分组，为每个组设置不同的工资表模板，计税方案。</div>
            <div>2、一位员工只能适用一个薪资组。</div>
          </div>
        </div>
      </div>
      <div>
        <a-button type="primary" @click="addGroup">
          <a-icon type="plus" />
          <span>新增薪资组</span>
        </a-button>
      </div>
    </div>
    <div>
      <a-table :columns="columns" :scroll="{ x: 1000 }" :data-source="groupList" row-key="id" :loading="loading" :pagination="false">
        <span slot="action" slot-scope="text, record" style="margin-left: -35px">
          <a-button type="link" @click="editClass(record.id)">编辑</a-button>
          <span class="primary">|</span>
          <a-button type="link" :disabled="record.name === '默认薪资组'" @click="handleVisible(record.id)"> 删除 </a-button>
        </span>
      </a-table>
    </div>
    <a-modal v-model="groupVisible" title="删除薪资组" @ok="handleDelete">
      <div>是否确认删除该薪资组？</div>
    </a-modal>
  </div>
</template>

<script>
import { getSalaryGroups, deleteSalaryGroup } from "@/api/wages/set";
const columns = [
  {
    title: "薪资组名称",
    dataIndex: "name",
    key: "name",
    width: 250
  },
  {
    title: "工资表模板",
    dataIndex: "salaryTemplateName",
    key: "salaryTemplateName",
    width: 150,
    scopedSlots: { customRender: "salaryTemplateName" }
  },
  {
    title: "计税规则",
    dataIndex: "taxName",
    key: "taxName",
    width: 150,
    scopedSlots: { customRender: "taxName" }
  },
  {
    title: "适用范围",
    key: "range",
    dataIndex: "range",
    width: 300,
    scopedSlots: { customRender: "range" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 150
  }
];
const monthRule = ["按正式/调薪后的工资计算", "按试用期/调薪前的工资计算", "按转正/调薪前后的工资混合计算"];
const taxRule = ["工资薪金所得税", "劳动报酬所得税", "不计税"];
export default {
  data() {
    return {
      deleteId: "",
      groupList: [],
      companyId: "",
      columns,
      groupVisible: false,
      loading: true,
      monthRule,
      taxRule
    };
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getData();
  },

  methods: {
    editClass(id) {
      this.$router.push({
        path: "/wages/set/group/add",
        query: {
          isEdit: 1,
          groupId: id
        }
      });
    },
    handleDelete() {
      deleteSalaryGroup(this.deleteId)
        .then((res) => {
          this.groupVisible = false;
          this.$message.success("删除成功");
          this.getData();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    handleVisible(id) {
      this.deleteId = id;
      this.groupVisible = true;
    },
    addGroup() {
      this.$router.push({
        path: "/wages/set/group/add",
        query: {
          isEdit: 0
        }
      });
    },
    getData() {
      this.loading = true;
      const data = {
        companyId: this.companyId
      };
      getSalaryGroups(data)
        .then((res) => {
          this.loading = false;
          this.groupList = res.data;
          this.groupList.forEach((item, index) => {
            if (item.isAllEmp === true) {
              item.range = "全部员工";
            }
            if (item.isAllEmp === false) {
              if (item.empInformationList && item.empInformationList.length > 0) {
                item.range = `${item.empInformationList[0].name}等${item.empInformationList.length}名员工`;
              } else item.range = "";
            }
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.wage-set-group {
  .top-wrapper {
    margin: 0 0 24px 0;
  }
  .wage-top-title {
    color: #252525;
    font-size: 16px;
    margin-top: 12px;
  }
  .wage-top-explain {
    color: #999999;
    font-size: 14px;
    margin-top: 12px;
    line-height: 24px;
  }
}
</style>
